<template>
	<div class="guess" :class="className">
		<v-title><slot>{{$t('message.youLike')}}</slot></v-title>
		<ul class="guess-container">
			<li v-if="index < num" v-for="(item, index) in products" :class="{ 'guess-no-right': index === lastItem }">
				<v-product-item-detail :product="item"></v-product-item-detail>
			</li>
		</ul>
	</div>
</template>

<script>
import VTitle from '@/components/base/VTitle'
import VProductItemDetail from '@/components/base/VProductItemDetail'

export default {
  name: 'fourGuess',
  props: {
    products: {
      type: Array,
      required: true
    },
    num: {
      type: Number,
      default: 5
    }
  },
  components: {
    VTitle,
    VProductItemDetail
  },
  computed: {
    className () {
      if (this.num === 4) {
        return 'four'
      } else {
        return 'five'
      }
    },
    lastItem () {
      if (this.num === 4) {
        return 3
      } else {
        return 4
      }
    }
  }
}
</script>

<style scoped>
.guess-container {
	max-height: 300px;
	margin-top: 40px;
	overflow: hidden;
}

.guess-container li {
	float: left;
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
}

.guess-container .guess-no-right {
	margin-right: 0;
}

.four {
	width: 976px;
}

.four li {
	width: 232px;
	padding: 23px 23px 22px;
	margin-right: 16px;
}

.five {
	width: 1200px;
}

.five li {
	width: 224px;
	padding: 19px 19px 21px;
	margin-right: 20px;
}
</style>
